<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <h2>当前n的值：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>

</div>
<script src="../js/vue.js"></script>
<script>
    Vue.config.productionTip = false//阻止vue启动时产生提示
    new Vue({
        el: "#root",
        data: {//数据
            name: '',
            n:1,
        },
        methods: {//方法
            add() {
                this.n++;
            },
            bye(){
                console.log('bye')
                this.$destroy()//销毁vm
            }

        },
        computed: {//计算

        },
        watch: {//监视

        },
        beforeCreate(){
            console.log('beforeCreate')

        },
        created(){
            console.log('created')

        },
        beforeCreate(){
            console.log('beforeCreate')
        },
        beforeMount(){
            console.log('beforeCreate')//挂载之前
        },
        mounted(){
            console.log('mounted'/*,this.$el instanceof HTMLElement*/)//挂载
        },
        beforeUpdate(){
            console.log('beforeUpdate')
            console.log(this.n)//n=2页面还未刷新页面n=1

        },
        updated(){
            console.log('updated')
            console.log((this.n))//n=2页面也是n=2；
        },
        beforeDestroy(){
            console.log('beforeDestroy')//销毁之前
        },
        destroyed(){
            console.log('destroyed')//销毁之后
        }
    })
</script>
</body>
</html>